<template>
   <div>
       <el-table
    ref="multipleTable"
    :data="tableData3"
    tooltip-effect="dark"
    style="width: 100%;"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      label="分类ID"
      width="90"
      align="center">
      <template slot-scope="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column
      prop="name"
      label="分类名称"
      width="240"
      align="center">
    </el-table-column>
    <el-table-column
      label="图标"
      align="center"
      width="240"
      show-overflow-tooltip>
      <template slot-scope="scope">
      <img src="../assets/logo.png" alt="" style="width:60px;height:60px;">
      </template>
    </el-table-column>
    <el-table-column
      prop="sale"
      label="排序"
      align="center"
      width="240"
      show-overflow-tooltip>
    </el-table-column>
    <el-table-column
      prop="address"
      label="操作"
      width="280"
      show-overflow-tooltip>
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
   </div>
</template>


<script>
export default {
  data() {
      return {
        tableData3: [{
          date: '1',
          name: '新鲜果蔬',
          address: '宜昌最新鲜的大椪柑',
          sale:'197.00',
          size:456,
          status:'已售',
          hsale:456
        }, {
          date: '2',
          name: '新鲜果蔬',
          address: '宜昌最新鲜的大椪柑',
          sale:'197.00',
          size:456,
          status:'已售',
          hsale:456
        }, {
          date: '3',
          name: '新鲜果蔬',
          address: '宜昌最新鲜的大椪柑',
          sale:'197.00',
          size:456,
          status:'已售',
          hsale:456
        }, {
          date: '4',
          name: '新鲜果蔬',
          address: '宜昌最新鲜的大椪柑',
          sale:'197.00',
          size:456,
          status:'已售',
          hsale:456
        }, {
          date: '5',
          name: '新鲜果蔬',
          address: '宜昌最新鲜的大椪柑',
          sale:'197.00',
          size:456,
          status:'已售',
          hsale:456
        }, {
          date: '6',
          name: '新鲜果蔬',
          address: '宜昌最新鲜的大椪柑',
          sale:'197.00',
          size:456,
          status:'已售',
          hsale:456
        }, {
          date: '7',
          name: '新鲜果蔬',
          address: '宜昌最新鲜的大椪柑',
          sale:'197.00',
          size:456,
          status:'已售',
          hsale:456
        }],
        multipleSelection: []
      }
    },

    methods: {
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      }
    }
};
</script>

<style lang="less" scoped>
</style>

